<template>
	<view>
		<u-navbar title="花儿朵朵" :autoBack="true" placeholder>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<view :style="{height: scrollViewHeight, position: 'relative'}">
				<map @callouttap="markertap" @markertap="markertap" id="map" :markers="markers" :style="{width: '100%', height: scrollViewHeight}" :scale="15" :latitude="latitude"
					:longitude="longitude"></map>
				<view class="visit-point">
					<scroll-view :scroll-into-view="toIndex" :scroll-x="true" class="scroll-x" style="width: calc(100vw - 96rpx)">
						<view :id="`A${item.id}`" @click="changeTag(item)" class="type-tag"
							:style="{marginRight: index === tagList.length-1 ? 0 : '16rpx', backgroundColor: curTag === item.id ? appColor+'33' : '#f5f5f5', color: curTag === item.id ? appColor : '#333',borderColor: curTag === item.id ? appColor : '#f5f5f5',}"
							v-for="(item) in tagList" :key="item.id">
							<text :class="['iconfont', item.logo]"></text>	
							<text style="padding-left: 8rpx;">{{item.name}}</text>
							</view>
					</scroll-view>
					<view class="visit-point-more" @click="show = true">
						<text style="font-size: 48rpx;" class="iconfont icon-gengduoneirong"></text>
					</view>
				</view>
				<view class="visit-tuijian">
					<view class="visit-tuijian-item" @click="toPage({path: '/pageDiamond1/scenicArea/index'})">
						<text style="font-size: 32rpx;color: #333;padding-right: 8rpx;" class="iconfont icon-iconset0210"></text>
						<text style="font-size: 28rpx;">景区概况</text>
					</view>
					<view style="height: 32rpx;" class="u-border-right"></view>
					<view class="visit-tuijian-item" @click="toPage({path: '/pageDiamond1/visitMap/hotPoints'})">
						<text style="font-size: 36rpx;color: #333;padding-right: 8rpx;" class="iconfont icon-daka"></text>
						<text style="font-size: 28rpx;">推荐打卡</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup mode="top" :show="show" @close="close" @open="open">
			<view>
				<view :style="{height: statusBarHeight1}"></view>
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 32rpx;">
					<text style="color: #333;font-size: 30rpx;">全部</text>
					<u-icon @click="show = false" size="20px" color="#333" name="close"></u-icon>
				</view>
				<view class="u-border-bottom"></view>
				<u-grid :col="4" :border="true" @click="click">
					<u-grid-item :bgColor="curTag === baseListItem.id ? appColor+'33' : 'transparent'" v-for="(baseListItem, baseListIndex) in tagList" :key="baseListIndex">
						<view style="height: 32rpx;"/>
						<text :style="{fontSize: '48rpx', color: curTag === baseListItem.id ? appColor : '#333'}" :class="['iconfont', baseListItem.logo]"></text>
						<view style="height: 16rpx;"/>
						<text :style="{color: curTag === baseListItem.id ? appColor : '#333'}" class="grid-text">{{baseListItem.name}}</text>
						<view style="height: 32rpx;"/>
					</u-grid-item>
				</u-grid>
				<view class="u-border-bottom"></view>
			</view>
		</u-popup>
		<u-popup closeable mode="bottom" :show="showDetail" @close="closeDetail">
			<view style="height: 64rpx;"/>
			<view style="padding: 32rpx;">
				<view style="display: flex;align-items: center; font-size: 32rpx;color: #333;font-weight: bold;margin-bottom: 16rpx;">
					<u--image @click="ticketClick" radius="8rpx" :src="info.image && info.image.split(',')[0]" width="120rpx" height="120rpx"></u--image>
					<text style="padding-left: 16rpx;">{{info.name}}</text>
				</view>
				<view style="font-size: 28rpx; color: #333;" class="u-line-2">{{info.remark}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {navigation} from '@/api/home.js';
	import {mapActions} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				showDetail: false,
				latitude: 29.803728,
				longitude: 106.27944,
				curTag: 0,
				tagList: [],
				toIndex: 'A0',
				markers: [],
				points: [],
				info: {}
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + this.bottom+ 'px';
			},
			statusBarHeight1() {
				return this.statusBarHeight + 44 + 'px'
			}
		},
		onLoad() {
			navigation().then(res => {
				if(res.result[0]) {
					this.curTag = res.result[0].id;
					this.toIndex = 'A' + res.result[0].id;
					this.getMarkers(res.result[0].id, res.result);
				}
				this.$nextTick(() => {
					this.tagList = res.result;
				})
			})
		},
		methods: {
			...mapActions(['setDetail']),
			ticketClick() {
				this.previewImg(0, this.info.image)
			},
			// 预览图片
			previewImg(current, urls) {
				urls = urls.split(',');
				uni.previewImage({
					current,
					urls,
				});
			},
			toDetail() {
				const {name, remark, image} = this.info;
				let detail = {
					name,
					remark: `<p>${remark}</p>`,
					image
				}
				// this.setDetail({detail});
				// uni.navigateTo({
				// 	url: '/pageDiamond1/story/storyDetail'
				// })
			},
			markertap({markerId}) {
				let cur = this.points.find(item => Number(item.id) === markerId);
				this.info = cur;
				this.showDetail = true;
			},
			getMarkers(id, list) {
				let cur = list.find(item => item.id === id);
				let markers = [];
				let points = []
				if(cur.pointList && cur.pointList.length>0) {
					const color = this.appColor;
					this.points = cur.pointList;
					cur.pointList.forEach((item, index) => {
						let [latitude, longitude] = item.latLng.split(',');
						// if(index === 0) {
						// 	this.latitude = latitude;
						// 	this.longitude = longitude;
						// }
						let obj = {
							id: Number(item.id),
							callout: {
								content: item.name,
								padding: 10,
								borderRadius: 4,
								display: 'ALWAYS',
								bgColor: '#ffffffCC',
								color: color,
								fontSize: 15
							},
							latitude,
							longitude,
							iconPath: '/static/img/marker.png',
							width: '34px',
							height: '34px',
							rotate: 0,
							alpha: 1
						}
						points.push({
							latitude,
							longitude,
						})
						markers.push(obj)
					})
				}
				const mapCtx = uni.createMapContext('map', this);
				mapCtx.includePoints({
				  points: markers,
				  padding: [36, 36, 10, 36]
				})
				this.markers = markers;
			},
			// 跳转
			toPage({path}) {
				if(!path) return;
				uni.navigateTo({
					url: path
				})
			},
			click(name) {
				this.toIndex = 'A' + this.tagList[name].id;
				this.show = false;
				this.curTag = this.tagList[name].id;
				this.getMarkers(this.tagList[name].id, this.tagList);
			},
			changeTag({
				id
			}) {
				this.getMarkers(id, this.tagList);
				this.curTag = id;
			},
			open() {
				// console.log('open');
			},
			closeDetail() {
				this.showDetail = false;
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>


<style lang="scss" scoped>
	
	
	.scroll-x {
		white-space: nowrap;
		display: flex;
	}

	.grid-text {
		font-size: 28rpx;
		color: #333;
	}

	.visit-point {
		position: absolute;
		background-color: #fff;
		width: 100vw;
		height: 100rpx;
		top: 0;
		left: 0;
		padding: 0 32rpx;

		.visit-point-more {
			position: absolute;
			right: 72rpx;
			top: 50%;
			transform: translateY(-65%);
			z-index: 100;
		}
	}

	.visit-tuijian {
		position: absolute;
		background-color: #fff;
		width: calc(100vw - 64rpx);
		height: 100rpx;
		bottom: 32rpx;
		left: 32rpx;
		border-radius: 16rpx 16rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		.visit-tuijian-item {
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #333;
		}
	}

	.type-tag {
		display: inline-block;
		font-size: 28rpx;
		padding: 16rpx 32rpx;
		border-radius: 16rpx;
		border-style: solid;
		border-width: 2rpx;
	}
</style>
